<template>
  <el-cascader
    size="small"
    :show-all-levels="changeOnSelect"
    :placeholder="placeholder"
    v-bind="$attrs"
    @change="onChange"
    :value="values"
    :options="categories"
    filterable
    :change-on-select="changeOnSelect"
  >
  </el-cascader>
</template>
<script>
import * as apiGoodsCategory from '@/api/goodsCategory';

export default {
  name: "category-cascader",
  inheritAttrs: false,
  model: {
    prop: "categoryIds",
    event: "changeCategory",
  },

  methods: {
    onChange(v) {
      if (this.type == 1) {
        if (v) {
          this.$emit("changeCategory", v.join(","));
        }
      } else {
        if (v) {
          this.$emit("changeCategory", v[v.length - 1]);
        }
      }
    },
  },
  props: {
    categoryIds: {
      default: "",
      tyep: [String, Number],
    },
    type: {
      default: 1,
      tyep: String,
    },
    hasRoot: {
      default: false,
      tyep: Boolean,
    },
    changeOnSelect: {
      default: true,
      tyep: Boolean,
    },
  },
  computed: {
    values() {
      if (this.categoryIds && typeof this.categoryIds === 'string' && this.categoryIds.length > 0) {
        let ids = this.categoryIds.replace(/^,|,$/g, "");
        if (ids) {
          return ids.split(",");
        }
      } else if(typeof this.categoryIds == 'number'){
        const cate = this.categories.find(el=>el.value == this.categoryIds || (el.children && el.children.some(j=>j.value==this.categoryIds)));
        if(cate){
          if(cate.id == this.categoryIds) {
            return [cate.value];
          } else {
            return [cate.value,this.categoryIds]
          }
        }
      }
      return [];
    },
  },
  created() {
    this.placeholder = "营销分类"
    apiGoodsCategory.list().then(info=>{
      // this.categories.push({
      //     value: 0,
      //     label: "(顶级分类)",
      //   });
        this.categories.push(
          ...info.map(item => ({
            value: item.id,
            label: item.categoryName,
            children: (item.childList || []).map((el) => ({
              value: el.id,
              label: el.categoryName,
            })),
          }))
        );
    })
      // this.$post(
      //   "/admin/goods_promotion_category/list_all",
      //   this.parameter
      // ).then((info) => {
      //   this.categories.push({
      //     value: 0,
      //     label: "(顶级分类)",
      //   });
      //   this.categories.push(
      //     ...info.map(item => ({
      //       value: item.id,
      //       label: item.categoryName,
      //       children: (item.childList || []).map((el) => ({
      //         value: el.id,
      //         label: el.categoryName,
      //       })),
      //     }))
      //   );
      // });

    // if (this.type == 1) {
    //   this.$get("/admin/goods_category/tree").then((info) => {
    //     if (this.hasRoot) {
    //       this.categories.push({
    //         value: "0",
    //         code: "",
    //         label: "(顶级分类)",
    //       });
    //     }
    //     this.categories.push(...info);
    //   });
    // }
    // if (this.type == 2) {
    //   this.placeholder = "营销分类"
    //   // 营销所属分类
    //   this.$post(
    //     "/admin/goods_promotion_category/list_all",
    //     this.parameter
    //   ).then((info) => {
    //     this.categories.push({
    //       value: 0,
    //       label: "(顶级分类)",
    //     });
    //     this.categories.push(
    //       ...info.map(item => ({
    //         value: item.id,
    //         label: item.categoryName,
    //         children: (item.childList || []).map((el) => ({
    //           value: el.id,
    //           label: el.categoryName,
    //         })),
    //       }))
    //     );
    //   });
    // }
  },
  data() {
    return {
      placeholder:"选择所属分类",
      categories: [],
    };
  },
};
</script>
